<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<style type="text/css">
.show{ background:#00ffff};
</style>
</head>

<body>
<div id="test">id:test</div>
<div class="test">class:test</div>
<div class="nothing">class:nothing
	<div class="nothing1">&nbsp;&nbsp;&nbsp;in nothing class:nothing1</div>
	<div id="thing">&nbsp;&nbsp;&nbsp;in nothing id:thing</div>
	<p>&nbsp;&nbsp;&nbsp;in nothing p</p>
	<ul>
		<li>in noting li1</li>
		<li class="thing">in noting class:thing li2</li>
		<li>in noting li3</li>
	</ul>
	<dl>
		<dd>in nothing dd1</dd>
		<dt>in nothing dt1</dt>
	</dl>
</div>
<form>
改变所有div的底色<input type="button" value="改变" id="test0" /><br />
改变所有nothing的底色<input type="button" value="改变" id="test1" /><br />
改变所有nothing下面li的底色<input type="button" value="改变" id="test2" /><br />
改变所有nothing下面class为thing的li的底色<input type="button" value="改变" id="test3" /><br />
改变所有非空的dl的底色<input type="button" value="改变" id="test4" /><br />
</form>
</body>
</html>
<script src="JS/Jquery.js" type="application/javascript" language="javascript"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('#test0').click(function(event){
		$('div').addClass('show');
	}).blur(function(event){
		$('div').removeClass('show');	
	});
	$('#test1').click(function(event){
		$('.nothing').addClass('show');
	}).blur(function(event){
		$('.nothing').removeClass('show');	
	});
	$('#test2').click(function(event){
		$('.nothing li').addClass('show');
	}).blur(function(event){
		$('.nothing li').removeClass('show');	
	});
	$('#test3').click(function(event){
		$('.nothing li.thing').addClass('show');
	}).blur(function(event){
		$('.nothing li.thing').removeClass('show');	
	});
	$('#test4').click(function(event){
		$('dl:not(:empty)').addClass('show');
	}).blur(function(event){
		$('dl:not(:empty)').removeClass('show');	
	});
});

</script>